<template>
  <div class="subCommentBox">
    <img :src="comment.commitPerson.avatar" width="30" height="30" class="circle">
    <div class="content-box">
      <div>{{comment.commitPerson.nickname}}</div>
      <div>回复 {{comment.replyedPerson.nickname}}:{{comment.commentText}}</div>
      <div class="flex jc-between">
        <span>{{comment.createdAt|formatDate}}</span>
        <div class="action-box" @click="onclick_reply" ref="actionBox">
          <i class="iconfont iconhuifu"></i>
          回复
        </div>
      </div>
      <ReplyBox class="ReplyBox" @onreply="onreply($event,comment)" ref="ReplyBox"
                :placeholder="'回复'+comment.commitPerson.nickname+'...'"></ReplyBox>
    </div>
  </div>
</template>

<script>
  import ReplyBox from "./ReplyBox"
  export default {
    name: "SubComment",
    props: ['comment', "superComment"],
    components: {
      ReplyBox
    },
    mounted() {
      document.addEventListener("click", this.onclick_el)

    },
    computed: {
      loginUser() {
        return this.$store.state.user
      }
    },
    methods: {
      onclick_reply() {
        // this.$emit("onclick_reply")
        console.log(this.$refs.ReplyBox);
        if (this.index != null) {
          this.$refs.ReplyBox.$el.style.display = "none"
        }
        this.$refs.ReplyBox.$el.style.display = "flex"
      },
      async onreply(text, comment) {
        console.log(text);
        console.log(comment)
        let res = await this.$http.post("/reply", {
          superComment: this.superComment,
          replyedPerson: comment.commitPerson.id,
          article: comment.article,
          commitPerson: this.loginUser.id,
          commentText: text,
        })
        console.log(res)
        if (res.code == 0) {
          if (this.$parent.getArticleComments) {
            this.$parent.getArticleComments()
          }
          this.$refs.ReplyBox.$el.style.display = "none";
          this.$refs.ReplyBox.commentText = "";
          this.$parent.article.commentCount++
          this.$message.success("回复成功")
        }

      },
      onclick_el(e) {
        if (this.$refs.actionBox && !this.$refs.actionBox.contains(e.target) && this.$refs.ReplyBox && !this.$refs.ReplyBox.$el.contains(e.target)) {
          this.$refs.ReplyBox.$el.style.display = "none";
          this.$refs.ReplyBox.commentText = ""
        }
      },
    },
    beforeDestroy() {
      window.removeEventListener("click", this.onclick_el)
    }

  }
</script>

<style scoped lang="less">
  .subCommentBox {
    padding: 12px 0 0 12px;
    border-radius: 3px;
    display: flex;
    align-items: flex-start;
  }

  .content-box {
    flex-grow: 1;
    margin-left: 10px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 12px;
    padding-right: 12px;
  }

  .ReplyBox {
    display: none;
  }
</style>
